REST Client 是 VS Code 扩展市场中的轻量级接口测试插件,与 Postman 相比:
| 特性 | Postman | REST Client |
|---|---|---|
| 安装方式 | 桌面客户端 | VS Code 插件 |
| 体积 | 较大(约 200MB) | 轻量(约 1MB) |
| 上下文切换 | 需切换应用 | 编辑器内调试 |
| 生产环境 | 不易安装 | 轻松安装 |
| 文件管理 | 云端同步 | 本地文件 |
| 学习成本 | 中等 | 低 |
REST Client 更适合:
.http 文件Postman 更适合:
REST Client创建文件:request.http
GET http://localhost:3000/db使用方式:
Send Request 按钮# 查询数据库
GET http://localhost:3000/db### 新增数据
POST http://localhost:3000/home
Content-Type: application/json
{
"message": "from rest client"
}语法要点:
### 分隔多个请求(必须)### 分页查询
GET http://localhost:3000/hello?page=2&size=2多行参数写法:
### 多行参数
GET http://localhost:3000/hello?page=2
&size=2
&sort=id注意事项:
& 连接### 带 Headers 的请求
POST http://localhost:3000/api/user
Content-Type: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
X-Custom-Header: custom-value
{
"name": "张三",
"email": "zhangsan@example.com"
}语法规则:
@host = http://localhost:3000
@token = eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
### 使用变量
GET {{host}}/db
Authorization: Bearer {{token}}注意:
@变量名 = 值 定义通过 # @prompt 变量名 说明 声明运行时输入变量,发送请求时会弹出输入框(值不会被存储):
### 输入密码场景
# @prompt password 请输入密码
POST {{host}}/api/login
Content-Type: application/json
{
"username": "admin",
"password": "{{password}}"
}使用场景:
创建 .env 文件:
BASE_URL=http://localhost:3000
API_KEY=your-api-key-here在 .http 文件中使用:
### 读取 .env 变量
GET {{$dotenv BASE_URL}}/api/data
X-API-Key: {{$dotenv API_KEY}}语法:{{$dotenv 变量名}}
操作步骤:
Copy Request As cURL生成示例:
curl --request GET \
--url http://localhost:3000/db \
--header 'Authorization: Bearer token123'操作步骤:
.http 文件-X、-H、-d 等常用参数)示例:
# 原始 curl
curl -X POST http://localhost:3000/home -H "Content-Type: application/json" -d '{"message":"test"}'等价的 .http 写法:
POST http://localhost:3000/home
Content-Type: application/json
{"message":"test"}REST Client: Generate Code Snippet| 语言 | 框架/库 |
|---|---|
| JavaScript | fetch, axios, jQuery |
| Python | requests, http.client |
| Java | OkHttp, Unirest |
| Go | native, req |
| PHP | curl, guzzle |
| Ruby | net/http |
| C# | HttpClient, RestSharp |
原始请求:
GET http://localhost:3000/hello?page=1&size=2生成 Python 代码:
import http.client
conn = http.client.HTTPConnection("localhost", 3000)
payload = ''
headers = {}
conn.request("GET", "/hello?page=1&size=2", payload, headers)
res = conn.getresponse()
data = res.read()
print(data.decode("utf-8"))操作步骤:
REST Client: Request History特点:
快捷键:
Cmd+Shift+OCtrl+Shift+O功能:
创建 api-test.http:
# ====================
# 环境变量配置
# ====================
@baseUrl = http://localhost:3000
# 真实 Token 建议用 Prompt 变量(见 4.1)或环境变量注入,不要明文提交
@token = your-jwt-token
# ====================
# 用户相关接口
# ====================
### 用户登录
POST {{baseUrl}}/api/login
Content-Type: application/json
{
"username": "admin",
"password": "123456"
}
### 获取用户列表
GET {{baseUrl}}/api/users
Authorization: Bearer {{token}}
### 查询用户详情
GET {{baseUrl}}/api/users/1
Authorization: Bearer {{token}}
### 新增用户
POST {{baseUrl}}/api/users
Content-Type: application/json
Authorization: Bearer {{token}}
{
"name": "张三",
"email": "zhangsan@example.com",
"age": 28
}
### 更新用户
PUT {{baseUrl}}/api/users/1
Content-Type: application/json
Authorization: Bearer {{token}}
{
"name": "李四",
"age": 30
}
### 删除用户
DELETE {{baseUrl}}/api/users/1
Authorization: Bearer {{token}}
# ====================
# 课程相关接口
# ====================
### 课程列表(分页)
GET {{baseUrl}}/api/courses?page=1
&size=10
&sort=createdAt
### 课程详情
GET {{baseUrl}}/api/courses/101
### 搜索课程
GET {{baseUrl}}/api/courses/search?keyword=Vue
# ====================
# 文件上传
# ====================
### 上传头像
POST {{baseUrl}}/api/upload/avatar
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary
------WebKitFormBoundary
Content-Disposition: form-data; name="file"; filename="avatar.jpg"
Content-Type: image/jpeg
< ./avatar.jpg
------WebKitFormBoundary--project/
├── .env # 环境变量
├── api/
│ ├── auth.http # 认证接口
│ ├── user.http # 用户接口
│ ├── course.http # 课程接口
│ └── upload.http # 上传接口
└── docs/
└── api-guide.md # 接口文档说明# 开发环境
BASE_URL=http://localhost:3000
API_VERSION=v1
# 测试环境
# BASE_URL=http://test.example.com
# 生产环境
# BASE_URL=https://api.example.com.gitignore 排除敏感信息:
# 排除敏感变量
.env.local
.env.*.local
# 排除临时文件
*.http.tmpapi/
├── auth.http # 认证模块
├── user.http # 用户模块
├── product.http # 商品模块
├── order.http # 订单模块
└── common.http # 公共变量common.http:
@baseUrl = http://localhost:3000
@apiVersion = v1
@contentType = application/json
# 可在其他文件引用# ====================
# 用户接口模块
# 功能:用户 CRUD 操作
# 作者:前端团队
# 更新时间:2026-03-08
# ====================
### 接口说明:用户登录
# 请求参数:
# - username: 用户名(必填)
# - password: 密码(必填)
# 返回示例:
# {
# "code": 0,
# "token": "eyJhbGc..."
# }
POST {{baseUrl}}/api/login
Content-Type: application/json
{
"username": "admin",
"password": "123456"
}创建多个环境文件:
# .env.dev
BASE_URL=http://localhost:3000
# .env.test
BASE_URL=http://test.example.com
# .env.prod
BASE_URL=https://api.example.com切换环境:
修改 .env 引用:
# 开发环境
ln -s .env.dev .env
# 测试环境
ln -s .env.test .env
# 生产环境
ln -s .env.prod .env优势:
规范:
.http 文件命名规范.env.local 管理| 问题 | 原因分析 | 解决方案 |
|---|---|---|
| 变量未生效 | 变量未定义或作用域错误 | 检查变量定义位置和引用语法 |
| 请求超时 | 网络问题或服务器未启动 | 检查网络连接和服务状态 |
| CORS 错误 | 跨域限制 | 使用代理或后端配置 CORS |
| HTTPS 证书错误 | 自签名证书 | VS Code 设置忽略证书检查 |
| 文件过长难查找 | 缺少组织 | 按模块分离文件 + 使用注释 |
| 敏感信息泄露 | 提交到 Git | 使用 .env.local + .gitignore |
| 中文乱码 | 编码问题 | 确保文件 UTF-8 编码 |
| Body 格式错误 | JSON 格式不规范 | 使用 JSON 校验工具 |
| 功能 | REST Client | Postman |
|---|---|---|
| 接口调试 | 支持 | 支持 |
| 环境变量 | 支持(@变量/.env) | 支持(多环境管理) |
| 代码生成 | 支持 | 支持 |
| curl 互转 | 支持 | 支持 |
| 历史记录 | 支持 | 支持 |
| Mock Server | 不支持 | 支持 |
| 自动化测试 | 不支持 | 支持 |
| 定时监控 | 不支持 | 支持 |
| 团队协作 | Git 协作 | 云端协作 |
| 文件管理 | 本地文件 | 云端存储 |
| 学习成本 | 低 | 中 |
| 安装便捷性 | 极简 | 较繁琐 |
api/ 目录,按模块组织 .http 文件.http 文件.http 文件,统一接口标准